M
MLOG
การประสานงานทรัพยากร React Suspense: การจัดการการโหลดทรัพยากรหลายรายการอย่างเชี่ยวชาญ | MLOG | MLOG

ข้อดี:

ข้อเสีย:

2. การโหลดตามลำดับด้วยการพึ่งพา

เมื่อทรัพยากรขึ้นอยู่กับกันและกัน คุณจะต้องโหลดทรัพยากรเหล่านั้นตามลำดับ Suspense ช่วยให้คุณจัดการการไหลนี้ได้โดยการวางคอมโพเนนต์ที่ดึงทรัพยากรที่เป็น dependency ไว้ซ้อนกัน

ตัวอย่าง: โหลดข้อมูลผู้ใช้ก่อน จากนั้นใช้ ID ผู้ใช้เพื่อดึงโพสต์ของพวกเขา

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

function UserProfile() {
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

ข้อดี:

ข้อเสีย:

3. การรวมการโหลดแบบขนานและแบบลำดับ

ในสถานการณ์ส่วนใหญ่ คุณสามารถรวมการโหลดทั้งแบบขนานและแบบลำดับเพื่อเพิ่มประสิทธิภาพ โหลดทรัพยากรที่เป็นอิสระแบบขนาน จากนั้นโหลดทรัพยากรที่เป็น dependency ตามลำดับหลังจากที่ทรัพยากรที่เป็นอิสระเหล่านั้นโหลด

ตัวอย่าง: โหลดข้อมูลผู้ใช้และกิจกรรมล่าสุดแบบขนาน จากนั้นหลังจากข้อมูลผู้ใช้โหลดแล้ว ให้ดึงโพสต์ของผู้ใช้

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');
const activityResource = fetchData('/api/activity');

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

function UserProfile() {
  const user = userResource.read();
  const activity = activityResource.read();

  return (
    

      
{user.name}

      
{user.bio}

      
Last activity: {activity.date}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

ในตัวอย่างนี้ `userResource` และ `activityResource` จะถูกดึงข้อมูลแบบขนาน เมื่อข้อมูลผู้ใช้พร้อมใช้งาน คอมโพเนนต์ `UserPosts` จะถูกเรนเดอร์ ซึ่งทำให้เกิดการดึงข้อมูลสำหรับโพสต์ของผู้ใช้

ข้อดี:

ข้อเสีย:

4. การใช้ React Context สำหรับการแชร์ทรัพยากร

React Context สามารถใช้เพื่อแชร์ทรัพยากรระหว่างคอมโพเนนต์และหลีกเลี่ยงการดึงข้อมูลซ้ำหลายครั้ง ซึ่งมีประโยชน์อย่างยิ่งเมื่อคอมโพเนนต์หลายรายการต้องการเข้าถึงทรัพยากรเดียวกัน

ตัวอย่าง:

            
import React, { createContext, useContext, Suspense } from 'react';
import fetchData from './fetchData';

const UserContext = createContext(null);

function UserProvider({ children }) {
  const userResource = fetchData('/api/user');

  return (
    
      {children}
    
  );
}

function UserProfile() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function UserAvatar() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    {user.name}
  );
}

function App() {
  return (
    
      Loading user profile...
}> ); } export default App;

ในตัวอย่างนี้ `UserProvider` จะดึงข้อมูลผู้ใช้และมอบข้อมูลให้กับ children ทั้งหมดผ่าน `UserContext` ทั้งคอมโพเนนต์ `UserProfile` และ `UserAvatar` สามารถเข้าถึงข้อมูลผู้ใช้ชุดเดียวกันได้โดยไม่ต้องดึงข้อมูลซ้ำ

ข้อดี:

ข้อเสีย:

5. ขอบเขตข้อผิดพลาดสำหรับการจัดการข้อผิดพลาดที่มีประสิทธิภาพ

Suspense ทำงานได้ดีกับขอบเขตข้อผิดพลาดเพื่อจัดการข้อผิดพลาดที่เกิดขึ้นในระหว่างการดึงข้อมูลหรือการเรนเดอร์ ขอบเขตข้อผิดพลาดคือคอมโพเนนต์ React ที่จับข้อผิดพลาด JavaScript ได้ทุกที่ในโครงสร้างคอมโพเนนต์ child ซึ่งบันทึกข้อผิดพลาดเหล่านั้นและแสดง UI สำรองแทนที่จะทำให้โครงสร้างคอมโพเนนต์ทั้งหมดล้มเหลว

ตัวอย่าง:

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';
import ErrorBoundary from './ErrorBoundary';

const userResource = fetchData('/api/user');

function UserProfile() {
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function App() {
  return (
    Something went wrong!
}> Loading user profile...}> ); } export default App;

ในตัวอย่างนี้ `ErrorBoundary` จะจับข้อผิดพลาดใดๆ ที่เกิดขึ้นในขณะที่เรนเดอร์คอมโพเนนต์ `UserProfile` หรือดึงข้อมูลผู้ใช้ หากเกิดข้อผิดพลาด มันจะแสดง UI สำรอง ป้องกันไม่ให้แอปพลิเคชันทั้งหมดล้มเหลว

ข้อดี:

ข้อเสีย:

ข้อควรพิจารณาในทางปฏิบัติสำหรับผู้ชมทั่วโลก

เมื่อพัฒนาแอปพลิเคชัน React สำหรับผู้ชมทั่วโลก ให้พิจารณาสิ่งต่อไปนี้:

ข้อมูลเชิงลึกที่นำไปปฏิบัติได้และแนวทางปฏิบัติที่ดีที่สุด

นี่คือข้อมูลเชิงลึกที่นำไปปฏิบัติได้และแนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดการการโหลดทรัพยากรหลายรายการด้วย React Suspense:

บทสรุป

React Suspense มอบกลไกที่มีประสิทธิภาพและยืดหยุ่นสำหรับการจัดการการดำเนินการแบบอะซิงโครนัสและปรับปรุงประสบการณ์ผู้ใช้ของแอปพลิเคชันของคุณ ด้วยการทำความเข้าใจแนวคิดหลักของ Suspense และทรัพยากร และโดยการใช้กลยุทธ์ที่อธิบายไว้ในโพสต์บล็อกนี้ คุณสามารถจัดการการโหลดทรัพยากรหลายรายการได้อย่างมีประสิทธิภาพและสร้างแอปพลิเคชัน React ที่ตอบสนองได้ดีขึ้นและแข็งแกร่งยิ่งขึ้นสำหรับผู้ชมทั่วโลก อย่าลืมพิจารณาการแปลสากล การเข้าถึง และการเพิ่มประสิทธิภาพเมื่อพัฒนาแอปพลิเคชันสำหรับผู้ใช้ทั่วโลก ด้วยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้ คุณสามารถสร้างแอปพลิเคชันที่ไม่เพียงแต่ใช้งานได้จริงเท่านั้น แต่ยังเป็นมิตรกับผู้ใช้และสามารถเข้าถึงได้สำหรับทุกคน